웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
NuxtJS에서 네트워크 통신을 위해 axios를 사용하는 경우 axios의 timeout 기본값을 설정하는 방법에 대하여 알아봅니다.
[ 잠깐 ] axios의 timeout 기본값을 설정해야 하는 이유는?
axios의 timeout 값 설정은 무엇이고 왜 필요할까요? 예를들어 운영중인 서버의 네트워크에 문제가 생겨 서버 통신이 지연되는 경우를 생각해보겠습니다. 충분히 발생 가능한 상황이죠~ 이 경우 접속한 클라이언트에 axios timeout값이 설정되어 있다면? 이 경우 해당 시간이 지나면 서버와의 연결을 즉시 중단합니다. 예를들어 5초로 설정된 경우 5초가 지나도 서버로부터 정상적인 응답을 받지 못하는 경우 네트워크가 중단되도록 설정하는 기능입니다.
만약에 반대로 timeout이 설정되지 않았다면? 이 경우 클라이언트는 계속해서 서버에 연결을 유지하고 응답 Response를 기다리게 될 것입니다. 만약 방문자가 많은(동접이 많은) ... 즉 서버의 요청이 많은 상태라면 과부하 등의 이유로 서버가 다운되거나 기타 더 큰 문제로 발생할 수 있습니다. 이런 이유로 적절한 Timeout 시간을 설정하여 에러 메시지를 보여주는 등의 설정이 필요할 수 있죠.
이제 axios timeout 값을 설정해봅니다. Timeout 값은 너무 짧으면 방문자가 접속하지 못하는 문제가 나타날 수도 있으므로 적절한 시간을 설정해야합니다. 개인적으로는 네트워크 상황을 고려하여 결정하되 8초에서 10초 사이가 정도가 적절하지 않나 생각됩니다. 다만 서버 환경 및 네트워크 상황을 고려하여 설정이 필요하겠습니다. 네크워크 상황이 항상 좋지 못한 경우라면 10 ~ 15초 설정이 필요할 수도 있겠죠.
하나. nuxt.config.js 설정하기
가장 먼저 nuxt.config.js 파일을 열고 설정에서 plugins 블록을 찾습니다. 파일을 열면 아래와 같이 빈 배열이거나 다른 설정값이 저장되어 있겠죠.
현재 값이 비어있습니다. 여기에 axios 설정 파일을 추가하도록 합니다. 아래와 같이 입력하겠습니다.
만약 /plugins/axios.plugin.js 이름의 파일이 없다면 하나 만들고 파일의 내용에 아래와 같이 입력 후 저장합니다.
@ axios.plugins.js
위에서는 default timeout 값을 5000 밀리세컨드인 5초로 설정하였습니다. 참고로 기본값은 0으로 0으로 설정된 경우 timeout을 설정하지 않은 것과 동일합니다.
여기까지 nuxt에서 axios timeout 기본값 설정 방법을 알아봤습니다. 위와 같이 plugins에 설정하여 사용하면 한 번만 설정하여 사용하면 되므로 편리합니다. 만약 각각 상황에 따라 다른 값이 필요한 경우 아래의 예제처럼 값을 변경해 사용할 수도 있습니다. 일반적으로 Request Header 값을 변경하는 경우 이런 방식으로 많이 사용하지만 timeout은 바꿀 일이 거의 없으므로 위와 같이 설정하는 편입니다. 그래도 방법을 간략하게 알아보면 다음과 같습니다.
위 코드는 함수 비동기 함수 getData()를 만들었으며 내부 코드는 axios를 사용해 서버로 요청하고 이때 { timeout: 5000 }를 설정한 경우의 예제입니다.
[ 잠깐 ] axios의 timeout 기본값을 설정해야 하는 이유는?
axios의 timeout 값 설정은 무엇이고 왜 필요할까요? 예를들어 운영중인 서버의 네트워크에 문제가 생겨 서버 통신이 지연되는 경우를 생각해보겠습니다. 충분히 발생 가능한 상황이죠~ 이 경우 접속한 클라이언트에 axios timeout값이 설정되어 있다면? 이 경우 해당 시간이 지나면 서버와의 연결을 즉시 중단합니다. 예를들어 5초로 설정된 경우 5초가 지나도 서버로부터 정상적인 응답을 받지 못하는 경우 네트워크가 중단되도록 설정하는 기능입니다.
만약에 반대로 timeout이 설정되지 않았다면? 이 경우 클라이언트는 계속해서 서버에 연결을 유지하고 응답 Response를 기다리게 될 것입니다. 만약 방문자가 많은(동접이 많은) ... 즉 서버의 요청이 많은 상태라면 과부하 등의 이유로 서버가 다운되거나 기타 더 큰 문제로 발생할 수 있습니다. 이런 이유로 적절한 Timeout 시간을 설정하여 에러 메시지를 보여주는 등의 설정이 필요할 수 있죠.
# nuxtjs axios timeout default 값 설정하기
이제 axios timeout 값을 설정해봅니다. Timeout 값은 너무 짧으면 방문자가 접속하지 못하는 문제가 나타날 수도 있으므로 적절한 시간을 설정해야합니다. 개인적으로는 네트워크 상황을 고려하여 결정하되 8초에서 10초 사이가 정도가 적절하지 않나 생각됩니다. 다만 서버 환경 및 네트워크 상황을 고려하여 설정이 필요하겠습니다. 네크워크 상황이 항상 좋지 못한 경우라면 10 ~ 15초 설정이 필요할 수도 있겠죠.
하나. nuxt.config.js 설정하기
가장 먼저 nuxt.config.js 파일을 열고 설정에서 plugins 블록을 찾습니다. 파일을 열면 아래와 같이 빈 배열이거나 다른 설정값이 저장되어 있겠죠.
plugins: []
현재 값이 비어있습니다. 여기에 axios 설정 파일을 추가하도록 합니다. 아래와 같이 입력하겠습니다.
plugins: ['~/plugins/axios.plugin.js'],
만약 /plugins/axios.plugin.js 이름의 파일이 없다면 하나 만들고 파일의 내용에 아래와 같이 입력 후 저장합니다.
@ axios.plugins.js
export default function ({ route, $axios, redirect, store }) {
$axios.defaults.timeout = 5000
}
$axios.defaults.timeout = 5000
}
위에서는 default timeout 값을 5000 밀리세컨드인 5초로 설정하였습니다. 참고로 기본값은 0으로 0으로 설정된 경우 timeout을 설정하지 않은 것과 동일합니다.
! 참고사항
여기까지 nuxt에서 axios timeout 기본값 설정 방법을 알아봤습니다. 위와 같이 plugins에 설정하여 사용하면 한 번만 설정하여 사용하면 되므로 편리합니다. 만약 각각 상황에 따라 다른 값이 필요한 경우 아래의 예제처럼 값을 변경해 사용할 수도 있습니다. 일반적으로 Request Header 값을 변경하는 경우 이런 방식으로 많이 사용하지만 timeout은 바꿀 일이 거의 없으므로 위와 같이 설정하는 편입니다. 그래도 방법을 간략하게 알아보면 다음과 같습니다.
import axios from axios;
const getData = async function () {
const result = await axios({
method: 'get',
url: 'http://webisfree.com',
timeout: 5000,
....
})
}
const getData = async function () {
const result = await axios({
method: 'get',
url: 'http://webisfree.com',
timeout: 5000,
....
})
}
위 코드는 함수 비동기 함수 getData()를 만들었으며 내부 코드는 axios를 사용해 서버로 요청하고 이때 { timeout: 5000 }를 설정한 경우의 예제입니다.
아래의 글도 찾고 계시지 않나요?
- lodash delay 시간 지연 메소드 정보
- [자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
Putty connection 시간이 짧은 경우 timeout 안되도록 시간 늘리기- [자바스크립트] 스톱워치, 타이머 함수 만들기, 초시계 구현
VueJS에서 setTimeout 사용하는 방법, 타이머 만들기- react native 타이머 함수, setTimeout() 구현하기
- setTimeout 함수에 파라미터 전달하는 방법
- 객체 내부에서 setTimeout 사용시 자기 자신을 호출하는 방법
- setTimeout() 사용시 delay가 정상 작동하지 않는 문제